
<template>
  <div class="userdetail" :style="moreDetailStyle">
    <h1 style="margin-top:0">
      {{loadingtext}}
    </h1>
    <div v-show="havedata">
          <el-scrollbar :style="usereditformstyle">
      <div style="margin:20px;font-weight:bolder">最近一次登录时间：{{userEditForm.Lasttime}} 最近一次登录IP：{{userEditForm.Lastip}}</div>
      <el-form :model="userEditForm" label-width="170px" :rules="userEditFormRules" ref="userEditForm" style="padding:0 10px;" :inline="true" v-if='isOther'>
        <h2>基本信息</h2>
        <el-form-item label="用户名" prop="Username">
          <b>{{userEditForm.Username}}</b>
        </el-form-item>
        <div style="clear:both"></div>
        <el-form-item label="所属部门" prop="Unitname">
          其他单位
        </el-form-item>
        <div style="clear:both"></div>
        <el-form-item label="单位名称" prop="Otherunitname">
          <el-input v-model="userEditForm.Otherunitname" auto-complete="off" style="width:417px;"></el-input>
        </el-form-item>
        <div style="clear:both"></div>
        <el-form-item label="真实姓名" prop="Truename" style="width:400px;">
          <el-input v-model="userEditForm.Truename" auto-complete="off" style="width:217px;"></el-input>
        </el-form-item>
        <div style="clear:both"></div>
        <el-form-item label="是否启用" prop="Enable" style="width:400px;">
          <el-radio-group v-model="userEditForm.Enable">
            <el-radio label="启用"></el-radio>
            <el-radio label="停用"></el-radio>
          </el-radio-group>
        </el-form-item>
        <div style="clear:both"></div>
        <el-form-item label="密码" prop="Password">
          <el-input v-model="userEditForm.Password" auto-complete="off" style="width:217px;" ></el-input> 如果填写密码将会重置
        </el-form-item>
        <div style="clear:both"></div>
        <el-form-item label="登录IP" prop="Remark">
          <el-input v-model="userEditForm.Remark" auto-complete="off" style="width:417px;" type="textarea" rows="5"></el-input>
        </el-form-item>
        <div style="clear:both"></div>
        <el-button type="primary" @click="userEdit" style="margin:0 20px 50px 170px;" :loading="saveloading">保存</el-button>
      </el-form>
          </el-scrollbar>
    </div>
  </div>
</template>

<script>
export default {
  name: 'otherDetail',
  watch: {
    timestamp: {
      handler (val) {
        console.log('其他单位子组件单位id：' + val)
        this.loadingtext = '正在加载中，请稍后...'
        if (this.myuserid && this.myuserid !== '') {
          this.getUser(this.myuserid)
        }
        this.setheight(this)
      },
      immediate: true
    },
    filterText (val) {
      this.$refs.tree3.filter(val)
    },
    filterTextBz (val) {
      this.$refs.treeBz.filter(val)
    }
    // $refs.tree2.getCurrentNode()
  },
  props: {
    myuserid: '',
    timestamp: ''
  },
  data () {
    return {
      isOther: false,
      keyword: '',
      userTmpResFormLoading: false,
      personlist: [],
      selectperson: [],
      userTmpResVisible: false,
      lsPersonList: [],
      tableListLoading: false,
      havedata: false,
      filterText: '',
      filterTextBz: '',
      userTmpResForm: {
        daterange: [],
        selectperson: []
      },
      userTmpResFormRules: {
      },
      userEditFormRules: {
        Truename: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' }
        ],
        Otherunitname: [
          { required: true, message: '请输入单位名称', trigger: 'blur' }
        ]
      },
      myprops: {
        isLeaf: 'isLeaf'
      },
      checkList: [],
      post: [],
      moreDetailStyle: 'height:0px',
      depttreestyle: 'height:0px',
      usereditformstyle: 'height:0px',
      deptid: '',
      mypersonid: '',
      showpersonVisible: false,
      loadingtext: '选择左侧树中用户查看用户信息',
      depteditVisible: false,
      depteditBtnsVisible: false,
      bzfenleioptions: {},
      bzshenfenoptions: {},
      bzzhiwuoptions: {},
      totalnum: 0,
      mydeptinfo: {},
      activeName: 'jigouxinxi',
      activeName0: 'jigouxinxi',
      editLoading: false,
      bzlistLoading: false,
      bz: [],
      deptlistLoading: false,
      dept: [],
      total: 0,
      page: 1,
      pagenum: 5,
      deptCurrentRow: '',
      mydeptEdit: false,
      listLoading: false,
      Isace: true,
      Sortkey: '',
      userEditForm: {
        Truename: '',
        Unitname: '',
        Managedep: [],
        Enable: '',
        Roles: [],
        Password: '',
        Remark: ''
      },
      saveloading: false,
      roleoptions: [],
      deptoptions: [],
      managedepopthions: [],
      showmanagedep: false,
      treedata1: [],
      connectbtntype: 'danger',
      connectbtntypeBz: 'danger',
      connecttip: '树节点切换为不联动模式',
      connecttipBz: '树节点切换为不联动模式',
      connecttype: false,
      connecttypeBz: false,
      personsaveLoading: false,
      bzsaveLoading: false,
      personId: '',
      personDetailVisible: false,
      editLsPersonId: '',
      LsPersonEditOrAdd: '新增',
      userrole: '',
      tableHeight: 100,
      rolesEnabled: true
    }
  },
  methods: {
    getUser (val) {
      var _this = this
      this.loadingtext = '正在加载中，请稍后...'
      this.filterText = ''
      this.filterTextBz = ''
      this.userEditForm = {}
      this.$http
        .get('/admin/user/' + val)
        .then(function (response) {
          _this.deptlistLoading = false
          _this.havedata = true
          console.log('UserName:' + response.data.User.Username)
          _this.userEditForm = response.data.User
          _this.loadingtext = '用户信息（' + response.data.User.Username + '）'
          _this.isOther = response.data.Isotheruser

          _this.DicRoles = response.data.DicRoles
          let Roles = []
          _this.userrole = ''
          if (response.data.Roles && response.data.Roles.length > 0) {
            for (let i = 0; i < response.data.Roles.length; i++) {
              if (response.data.Roles[i] > 11 && response.data.Roles[i] < 16) { // 用户身份
                _this.userrole = response.data.Roles[i]
              } else {
                Roles.push(response.data.Roles[i])
              }
            }
          }
          _this.checkList = Roles
          _this.ModuleList = []
          for (var i = 0; i < _this.DicRoles.length; i++) {
            if (i === 0 || _this.DicRoles[i].Modulename !== _this.DicRoles[i - 1].Modulename) {
              _this.ModuleList.push(_this.DicRoles[i].Modulename)
            }
          }
        })
        .catch(function (error) {
          console.log(error)
          _this.loadingtext = '网络获取失败'
          _this.$message({
            message: '网络获取失败',
            type: 'error'
          })
        })
    },
    userEdit () {
      var _this = this
      this.$refs.userEditForm.validate((valid) => {
        if (valid) {
          this.saveloading = true
          let Roles = []
          for (let i = 0; i < this.checkList.length; i++) {
            Roles.push(this.checkList[i])
          }
          if (this.userrole !== '') {
            Roles.push(this.userrole)
          }
          console.log(Roles)
          let para = {
            Id: this.myuserid,
            Truename: this.userEditForm.Truename,
            Unitname: this.userEditForm.Unitname,
            Managedep: this.userEditForm.Managedep,
            Enable: this.userEditForm.Enable,
            Password: this.userEditForm.Password,
            Remark: this.userEditForm.Remark,
            Otherunitname: this.userEditForm.Otherunitname,
            Roles: Roles
          }
          this.$http.post(`/admin/edituser`, para).then(function (response) {
            if (response.data.success === true) {
              _this.$message({
                message: '保存成功',
                type: 'success'
              })
              _this.saveloading = false
            } else {
              _this.$message({
                message: '保存失败2:' + response.data.message,
                type: 'error'
              })
              _this.saveloading = false
            }
          }).catch(function (error) {
            _this.$message({
              message: '保存失败3:' + error,
              type: 'error'
            })
            _this.saveloading = false
          })
        }
      })
    },
    setheight (obj) {
      var clientHeight = 0
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      } else {
        clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      }
      obj.moreDetailStyle = 'height:' + (clientHeight - 210) + 'px'
      obj.depttreestyle = 'height:' + (clientHeight - 245) + 'px'
      obj.usereditformstyle = 'height:' + (clientHeight - 155) + 'px'
      obj.tableHeight = clientHeight - 243
    }
  },
  mounted () {
    let _this = this
    window.onresize = function windowResize () {
      // 通过捕获系统的onresize事件触发我们需要执行的事件
      _this.setheight(_this)
      console.log('test0:' + _this.moreDetailStyle)
    }
  }
}
</script>
<style>
#userdetail{
  overflow: hidden;
}
#userdetail .el-pagination{
  float: left;
  padding:7px 10px;
}
#userdetail h1{
  height: 30px;
  border-bottom: 1px solid #95B8E7;
  font-family: '宋体';
  line-height: 30px;
  font-size:var(--size14) !important;
  color: #000;
  padding-left:10px;
  background-image: linear-gradient(to bottom , #EEF4FF, #E0ECFF);
  margin-bottom:0;
}
#userdetail .el-tabs__header{
  height: 29px;
  background: #FAFAFA;
  line-height: 30px;
  font-family: '宋体';
  padding:0 20px;
  border-bottom: 2px solid #E4E7ED;
  margin:0;
}
#userdetail .el-tabs__item{
  line-height: 30px;
  height: 30px;
  font-weight:bolder;
}
#userdetail .mytable table{
  border-top: 1px solid #74A6CC;
  border-left: 1px solid #74A6CC;
  margin: 10px;
  width: calc(100% - 20px);
}
#userdetail .mytable th,
#userdetail .mytable td{
  padding: 10px;
  border-right: 1px solid #74A6CC;
  border-bottom: 1px solid #74A6CC;
  vertical-align:top;
  line-height: 150%;
}
#userdetail .mytable th{
  background:#C0DCF1;
}
#userdetail .el-table th{
    font-weight: normal;
    background-image: linear-gradient(to bottom , #f8f8f8, #efefef);
  }
#userdetail .el-table td, .el-table th{
    padding:0;
    font-size:var(--size14) !important;
    line-height: 20px;
    font-family: '宋体'
  }
  .tableth{
    background-image: linear-gradient(to bottom , #f8f8f8, #efefef);
  }
.bztable{
  text-align: center
}
#userdetail .bztable th{
  vertical-align:middle;
}
#userdetail .detailinfotable th{
  width:200px;
}
.zhize{
  line-height: 200%;
}
#userdetail .depttreebtn{
  padding:12px 12px 12px 12px !important
}
#userdetail .depttree{
  clear: both;
}
.transfer-class .el-transfer-panel{
  clear: both;
  border: 1px solid #409EFF;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  display: inline-block;
  vertical-align: middle;
  width: 350px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  height: 350px;
}
.transfer-class .el-transfer-panel .el-transfer-panel__header{
  /* background:#409EFF; */
  /* color:#fff; */
  border-bottom:1px solid #409EFF;
}
/* .transfer-class .el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label{
  color:#fff;
}
.transfer-class .el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label span{
  color:#fff;
}
.transfer-class .el-transfer-panel .el-transfer-panel__empty{
  color:#000;
} */
/* #userdetail .transfer-class div:nth-child(3) .el-transfer-panel__filter{
  display:none
} */
</style>
